<!--专家问答-->
<template>
    <div class="expert-question-container">
        <div v-for="(item, index) in questionArray" :key="index" class="question-item">
            <div class="question-content">
                <div class="title">{{ item.title }}</div>
                <div class="content">{{ item.question }}</div>
                <div class="item-container">
                    <div class="item-content marginR30" v-if="role === 'expert'">提问者：<span class="item-text">{{
                        item.questioner }}</span> </div>
                    <div class="item-content marginR30" v-if="role === 'expert'">提问者联系方式：<span class="item-text">{{
                        item.phone }}</span> </div>
                    <div class="item-content marginR30" v-if="role === 'questioner'">专家姓名：<span class="item-text">{{
                        item.expertName }}</span></div>
                    <el-tag :type="item.status === 0 ? 'danger' : 'success'" size="mini">{{ item.status === 0 ? '未回答'
                        : '已回答' }}</el-tag>
                </div>
            </div>
            <div class="question-btn">
                <div class="btn-text" @click="handleDetail(item)">详情</div>
                <div class="btn-text" @click="handleEdit(item)" v-if="role === 'questioner' && item.status == '0'">修改
                </div>
                <div class="btn-text" @click="handleEdit(item)" v-if="role === 'expert' && item.status == 0">回答</div>
                <div class="btn-text" @click="deleteInfo(item)"  v-if="role === 'questioner'">删除</div>
            </div>
        </div>


        <!-- 详情 -->
        <el-dialog :close-on-click-modal="false" v-model="showDetail" title="详情" :before-close="handleClose">
            <div>
                <div class="detail-item">
                    <div class="item-title">问题标题：</div>
                    <div class="item-content">{{ detailObj.title }}</div>
                </div>
                <div class="detail-item">
                    <div class="item-title">问题内容：</div>
                    <div class="item-content">{{ detailObj.question }}</div>
                </div>
                <div class="detail-item" v-if="role === 'questioner'">
                    <div class="item-title">专家姓名：</div>
                    <div class="item-content">{{ detailObj.expertName }}</div>
                </div>
                <div class="detail-item" v-if="role === 'questioner'">
                    <div class="item-title">专家回答：</div>
                    <div class="item-content">{{ detailObj.answer }}</div>
                </div>
                <div class="detail-item">
                    <div class="item-title">提问者：</div>
                    <div class="item-content">{{ detailObj.questioner }}</div>
                </div>
                <div class="detail-item">
                    <div class="item-title">问题状态：</div>
                    <el-tag type="danger" size="mini">{{ detailObj.status === 0 ? '未回答' : '已回答' }}</el-tag>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showDetail = false">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 修改 -->
        <el-dialog :close-on-click-modal="false" :title="title" v-model="dialogVisible" width="650px"
            :before-close="closeRevise">
            <div>
                <div class="detail-item">
                    <div class="item-title">问题标题：</div>
                    <div class="item-content">{{ detailObj.title }}</div>
                </div>
                <!-- 专家不能改问题内容 -->
                <div class="detail-item" v-if="role === 'expert' || detailObj.status === 1">
                    <div class="item-title">内容：</div>
                    <div class="item-content">{{ detailObj.question }}</div>
                </div>
                <!-- 提问者可以改问题内容 -->
                <el-form ref="form" :model="detailObj" label-width="60px"
                    v-if="role === 'questioner' && detailObj.status === 0">
                    <el-form-item label="内容：">
                        <el-input type="textarea" v-model="detailObj.question"></el-input>
                    </el-form-item>
                </el-form>
                <div class="detail-item" v-if="role === 'questioner' && detailObj.status === 1">
                    <div class="item-title">回答：</div>
                    <div class="item-content">{{ detailObj.answer }}</div>
                </div>
                <el-form ref="form" :model="detailObj" label-width="60px" v-if="role === 'expert'">
                    <el-form-item label="回答：">
                        <el-input type="textarea" v-model="detailObj.answer"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script setup>
import { selectQuestionByUser, reviseQuestionByUserId, delQuestionByUserId } from '@/api/question.js'
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import store from '@/store'


const questionArray = ref([])
const role = ref(store.state.role[0].authority == 'user' ? 'questioner' : 'expert')

//详情
const showDetail = ref(false)
//修改
const dialogVisible = ref(false)
//详情对象
const detailObj = ref({
    title: '',
    question: '',
    expertName: '',
    answer: '',
    address: '',
    area: '',
    expertName: '',
    plantCondition: '',
    plantDetail: '',
    plantName: '',
    questioner: '',
    soilCondition: '',
    status: 1
})

// 加载数据
const load = () => {
    detailObj.title = ''
    detailObj.question = ''
    detailObj.expertName = ''
    detailObj.answer = ''
    detailObj.address = ''
    detailObj.area = ''
    detailObj.expertName = ''
    detailObj.plantCondition = ''
    detailObj.plantDetail = ''
    detailObj.plantName = ''
    detailObj.questioner = ''
    detailObj.soilCondition = ''
    detailObj.status = 1
    selectQuestionByUser({ role: role.value })
        .then(res => {
            questionArray.value = res.data

        }).catch(err => {
            console.log(err)
        })
}
load()



//查看详情
const handleDetail = (val) => {
    showDetail.value = true
    detailObj.value = val
}


//修改
const handleEdit = (item) => {
    dialogVisible.value = true
    detailObj.value = item
}

const update = () => {

    //专家回答问题
    if (role.value === 'expert' && detailObj.value.status === 0) {
        detailObj.value.status = 1
    }

    reviseQuestionByUserId(detailObj.value).then(res => {
        if (res.flag) {
            ElMessage.success('修改成功')
            dialogVisible.value = false

            load()
        } else {
            ElMessage.error('修改失败')
        }
    }).catch(err => {
        console.log(err)
    })
}

//删除
const deleteInfo = (val) => {
    delQuestionByUserId({ id: val }).then(res => {
        if (res.flag) {
            ElMessage.success('删除成功')
            load()
        } else {
            ElMessage.error('删除失败')
        }
    }).catch(err => {
        console.log(err)
    })
}

</script>

<style lang="scss" scoped>
.expert-question-container {
    text-align: left;
    width: 900px;
    min-height: 100%;
    // padding: 10px 20px;
    background: #fff;

    .question-item {
        border: 1px solid #f2f2f2;
        border-radius: 6px;
        padding: 10px 20px;
        margin: 10px 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .question-content {
            width: 650px;

            .title {
                font-weight: bold;
                font-size: 18px;
                line-height: 30px;
                height: 30px;
            }

            .content {
                line-height: 25px;
                height: auto;
                word-break: break-all;
            }

            .item-container {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                font-size: 12px;
                line-height: 20px;
            }

            .marginR30 {
                margin-right: 30px;
            }

            .item-text {
                color: #666;
            }
        }

        .question-btn {
            display: flex;

            .btn-text {
                height: 25px;
                cursor: pointer;
                margin-right: 10px;
                color: #67C23A;

                &:hover {
                    color: #035D1C;
                    text-decoration: underline;
                }
            }
        }
    }

    .detail-item {
        display: flex;
        line-height: 30px;

        .item-content {
            line-height: 30px;
            height: auto;
            width: 480px;
        }

        .item-title {
            width: 80px;
            height: 30px;
            font-weight: bold;
            color: #333;
        }
    }
}
</style>